<script setup>

import { onMounted, reactive, ref } from 'vue'
import { deleteLabelByIdApi, getLabelsApi ,addOrUpdateLabelApi} from '../../apis/label/index.js'
import {Check, Close} from '@element-plus/icons-vue'
import { deleteSortByIdApi } from '../../apis/sort/index.js'

const labelList = ref([])
const dialogTableVisible = ref(false)
onMounted(async () => {
  labelList.value = (await getLabelsApi()).data
})

/**
 * 添加或编辑的数据
 * @type {Ref<any>}
 */
const label = ref()

//默认是编辑模式
const editMode = ref(true)
const status = ref(true)
const deleted = ref(false)
const formData = reactive({
  id: '',
  labelName: '',
  labelDescription: ''
})

const onAddClick = () => {
  dialogTableVisible.value = true
  editMode.value = false
}

const onStatusChange=async (row)=>{
  console.log('row',row)
  await addOrUpdateLabelApi(row)

}

const onDeleteChange=async (row)=>{
  //如果标签被使用，则不能删除
  try {
    await deleteLabelByIdApi(row.id,row.deleted)
  }catch (e){
    row.deleted=0
  }
}

const onEditClick = ({ id, labelName, labelDescription }) => {
  console.log('from', labelName, id)
  dialogTableVisible.value = true
  editMode.value = true
  formData.labelName = labelName
  formData.id = id
  formData.labelDescription = labelDescription

}

const onDialogClose = () => {
  formData.id = ''
  formData.labelName = ''
  formData.labelDescription = ''
}

const handleDeleteLabel = async (labelId) => {
  console.log('delete', labelId)
  await deleteLabelByIdApi(labelId)
}

const handleSaveLabel = async () => {
  console.log('add', formData)
  await addOrUpdateLabelApi(formData)
  //添加成功关闭对话框
  dialogTableVisible.value = false
  labelList.value = (await getLabelsApi()).data
}


</script>

<template>
  <el-button type="primary"
             @click="onAddClick">添加
  </el-button>
  <el-dialog
      class="dialog"
      @close="onDialogClose"
      v-model="dialogTableVisible"
      :title="editMode?'修改数据':'添加数据'"
  >
    <el-form
        label-position="right"
        label-width="auto"
        :model="formData"
    >
      <el-form-item label="标签">
        <el-input v-model="formData.labelName"/>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="formData.labelDescription"/>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="handleSaveLabel">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-table :data="labelList">
    <el-table-column type="index"
                     label="序号"
                     width="70"></el-table-column>

    <el-table-column prop="labelName"
                     label="标签">

    </el-table-column>
    <el-table-column prop="labelDescription"
                     label="描述"></el-table-column>
    <el-table-column prop="status"
                     label="状态">
      <template #default="{row}">
        <el-switch
            v-model="row.status"
            @change="onStatusChange(row)"
            class="mt-2"
            style="margin-left: 24px"
            inline-prompt
            :disabled="row.deleted===1"
            :active-icon="Check"
            :inactive-icon="Close"
            :active-value="1"
            :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column prop="deleted"
                     label="删除">
      <template #default="{ row }">
        <el-switch
            v-model="row.deleted"
            @change="onDeleteChange(row)"
            class="mt-2"
            style="margin-left: 24px"
            inline-prompt
            :active-icon="Check"
            :inactive-icon="Close"
            :active-value="1"
            :inactive-value="0"
        />
      </template>
    </el-table-column>

    <el-table-column label="操作"
                     width="120">
      <template #default="{ row }">
        <div class="func-group">
          <el-button type="primary"
                     size="small"
                     :disabled="row.deleted===1"
                     @click="onEditClick(row)"
          >编辑
          </el-button>

        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped
       lang="scss">
.dialog {
  .tag-list {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }
}

.func-group {
  display: flex;
}
</style>
